<template>
    <div class="demo-image" v-loading="loading" >
        <div class="block" v-for="(img,index) in Z_picList" :key="index">
            <el-image  :src="baseUrl+img.fileBinary"  :preview-src-list="[baseUrl+img.fileBinary]"  class="errorThree" :fit="'fit'" ></el-image>
            <span class="layer">第{{img.layer}}层</span>
        </div>
    </div>
</template>

<script>
import {getErrorPhoto} from "@/api/data/proData"
  export default {
    data() {
      return {
        base_url:"/dev-api",
        errorID:"",
        Z_picList: [],
        loading : false,
      }
    },
    created(){
        this.errorID = this.$route.params.ID;
        this.getZ_XPhoto()
    },
    methods: {
         //获取z视图
        getZ_XPhoto(){
            let data = {
                id:this.errorID,
                picType:"Z",
                checkType:"0"
            }
            this.loading = true;
            getErrorPhoto(data).then(
                 response => {
                    if(response.data){
                        this.Z_picList = response.data;
                        this.loading = false;
                    }
                 }
            )
        },
        //缩略图获取
        dealImage(val){
            let imagepath= val.split("/")
            imagepath.splice(imagepath.length-1,0,"compress")
            // console.log(imagepath.join("/"))
            return this.baseUrl+imagepath.join("/")
        }
    },
  }
</script>
<style lang="scss"  scoped  >
.demo-image{
    display: flex;
    flex-wrap:wrap;
    justify-content:space-around;
    background: #EDEFF4;
    height: 100vh;
    padding-top: 35px;
    box-sizing: border-box;

}
.block{
        height:28%;
        width: 30%;
        background: #dfdfdf;
        position: relative;
    }
.errorThree{
    width: 100%;
    height: 100%;
}    
.layer{
    position: absolute;
    bottom: 0px;
    display: block;
    padding: auto;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding:6px 0;
    width: 100%;
}
</style>